<!-- 提现记录 -->
<template>
  <view class="container">
    <view class="com-detail">
      <u-tabs-swiper
        ref="uTabs"
        :bar-style="barStyle"
        :fontSize="tabOptions['font-size']"
        :activeColor="tabOptions['active-color']"
        :inactiveColor="tabOptions['inactive-color']"
        :barWidth="tabOptions['bar-width']"
        :bgColor="tabOptions['bg-color']"
        :gutter="tabOptions.gutter"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
        swiperWidth="750"
      />

      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item" v-for="(tab, index) in list" :key="index">
          <scroll-view scroll-y style="height: 100%; width: 100%" @scrolltolower="onreachBottom">
            <view class="content">
              <view class="receive-item" v-for="(item, index) in dataList" :key="index">
                <view class="left">
                  <image
                    src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/icon_wechat.png"
                    mode="scaleToFill"
                  />
                  <view class="info">
                    <view class="text">{{ item.text }}</view>
                    <view class="time">{{ item.time }}</view>
                  </view>
                </view>
                <view class="right">
                  <view class="amount">+{{ item.amount }}元</view>
                </view>
              </view>
            </view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      swiperCurrent: 0,
      list: [
        {
          name: "全部收入",
        },
        {
          name: "提现记录",
        },
      ],
      tabOptions: {
        "font-size": 26,
        "active-color": "#000",
        "inactive-color": "#000",
        "bar-width": 106,
        "bg-color": "#fff",
        gutter: 110,
      },
      barStyle: {
        "background-color": "#F95513",
      },
      dataList: [
        {
          img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/receive_avator.png",
          text: "子涵报名【遇见川美】第一期",
          time: "2024-04-01",
          amount: "3333",
        },
        {
          img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/receive_avator.png",
          text: "子涵报名【遇见川美】第一期",
          time: "2024-04-01",
          amount: "3333",
        },
        {
          img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/receive_avator.png",
          text: "子涵报名【遇见川美】第一期",
          time: "2024-04-01",
          amount: "3333",
        },
        {
          img: "https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/yanxue/receive_avator.png",
          text: "子涵报名【遇见川美】第一期",
          time: "2024-04-01",
          amount: "3333",
        },
      ],
    };
  },
  methods: {
    tabsChange(index) {
      this.swiperCurrent = index;
    },

    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f6f6f6;
}

.com-detail {
  width: 702rpx;
  height: 964rpx;
  background: #ffffff;
  box-shadow: -4rpx 0rpx 19rpx 1rpx rgba(52, 52, 52, 0.15);
  border-radius: 48rpx;
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 26rpx;
  .swiper-box {
    flex: 1;
    .swiper-item {
      .content {
        padding: 30rpx 40rpx;

        .receive-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 24rpx 30rpx;
          border-bottom: 2rpx solid #c4c4c4;

          .left {
            display: flex;
            align-items: center;

            image {
              width: 74rpx;
              height: 74rpx;
              margin-right: 16rpx;
            }

            .info {
              margin-left: 20rpx;

              .text {
                font-family: HarmonyOS Sans SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
              }

              .time {
                font-family: HarmonyOS Sans SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #c4c3c3;
                line-height: 26rpx;
                margin-top: 22rpx;
              }
            }
          }

          .right {
            .amount {
              font-family: HarmonyOS Sans SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #000000;
              line-height: 24rpx;
            }
          }
        }
      }
    }
  }
}
</style>
